<template>
	<view class="header">
		<view style="width: 100%;height: var(--status-bar-height)"></view>
		<!-- 首页 -->
		<view class="home_header" v-if="type=='home'">
			<view class="top flex_between">
				<image class="img" src="../../static/img/avatar.png" mode="widthFix" @tap="toMine"></image>
				<view class="search flex_center" @tap="toSearch">{{$t("请输入要搜索的股票代码")}}</view>
				<image class="news" src="../../static/img/news.png" mode="widthFix" @tap="openAD"></image>
			</view>
			<!-- 轮播图 -->
			<view class="ad">
				<image v-if="banner.image" class="img" mode="widthFix" :src="banner.image"></image>
				<!-- <image v-else class="img" mode="widthFix" src="../../static/img/ad.png"></image> -->
			</view>
			<view class="nav">
				<view class="nav_list flex_center" v-for="(i,index) in list" :key="index" @tap.stop="toPath(i)">
					<image class="img" :src="i.img"></image>
					<view>{{i.name}}</view>
				</view>
			</view>
		</view>
		<view class="home_header all_header" v-else-if="type=='all'">
			<view class="top flex_between">
				<image class="img" src="../../static/img/avatar.png" mode="widthFix" @tap="toMine"></image>
				<view class="search flex_center" @tap="toSearch">{{$t("请输入要搜索的股票代码")}}</view>
				<image class="news" src="../../static/img/news.png" mode="widthFix" @tap="openAD"></image>
			</view>
		</view>
		<view class="second_header flex_center" v-else-if="type=='second'">
			<uni-icons class="icon" v-if="leftShow" type="back" color="#dfdfdf" size="30" @tap="pageBack"></uni-icons>
			<view class="title">
				<slot></slot>
			</view>
			<image v-if="rightShow" class="news" src="../../static/img/news.png" style="width: 48rpx;height: 48rpx;"
				@tap="openAD">
			</image>
		</view>
		<u-popup :show="ADShow" @close="close" mode="center">
			<view class="mask col_center">
				<view class="title">{{$t('最新资讯')}}</view>
				<view class="inner col_center">
					<view class="inner_title">{{$t('躺着家里也能赚钱')}}</view>
					<view class="inner_detail">
						{{$t('抓住市场机遇，不要错过')}}
						<text style="color: #ffc12c;">{{$t('绝佳投资')}}</text>
						{{$t('机会')}}
					</view>
				</view>
				<uni-icons type="clear" size="28" color="#c0c0c3" style="margin-top: 40rpx;" @tap="close"></uni-icons>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		bannerApi
	} from '@/api/api.js'
	export default {
		props: ["type", "leftShow", "rightShow"],
		data() {
			return {
				list: [{
						img: require('../../static/img/nav1.png'),
						name: this.$t('抢筹'),
						path: "/pages/dividend/dividend"
					},
					{
						img: require('../../static/img/nav2.png'),
						name: this.$t('新股'),
						path: "/pages/newShare/newShare"
					},
					{
						img: require('../../static/img/nav3.png'),
						name: this.$t('交易'),
						tab: "/pages/deal/deal"
					},
					{
						img: require('../../static/img/nav4.png'),
						name: this.$t('充值'),
						path: "/pages/recharge/recharge"
					},
					{
						img: require('../../static/img/nav5.png'),
						name: this.$t('客服')
					},
					{
						img: require('../../static/img/nav6.png'),
						name: this.$t('资金记录'),
						tab: "/pages/record/record"
					},
					{
						img: require('../../static/img/nav7.png'),
						name: this.$t('提现'),
						path: "/pages/withdrawal/withdrawal"
					},
					{
						img: require('../../static/img/nav8.png'),
						name: this.$t('自选'),
						tab: "/pages/stock/stock",
						isStock: true
					},
				],
				ADShow: false,

				banner: []
			};
		},
		mounted() {
			if (this.type == 'home') {
				this.getBanner()
			}
		},
		methods: {
			pageBack() {
				let backPage = getCurrentPages()
				if (backPage.length == 1) {
					uni.switchTab({
						url: "/pages/home/home"
					})
				} else {
					uni.navigateBack()
				}
			},

			getBanner() {
				const params = {
					id: 4
				}
				bannerApi(params).then(res => {
					this.banner = res.data.data[0]
					// console.log(this.banner, '轮播图......')
					// console.log(res)
				})
			},

			openAD() {
				this.ADShow = true
			},
			close() {
				this.ADShow = false
			},
			toSearch() {
				uni.navigateTo({
					url: "/pages/search/search"
				})
			},
			toPath(opt) {
				if (opt.path) {
					uni.navigateTo({
						url: opt.path
					})
				} else if (opt.tab) {
					if (opt.isStock) {
						uni.setStorageSync("type", 2)
					}
					uni.switchTab({
						url: opt.tab
					})
				} else {
					uni.$u.toast("模块开发中")
					return
				}

			},
			toMine() {
				uni.switchTab({
					url: "/pages/mine/mine"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mask {
		width: 630rpx;
		position: relative;

		.title {
			min-width: 300rpx;
			height: 88rpx;
			background: url("../../static/img/ad_title.png") no-repeat center / 100%;
			position: absolute;
			left: 50%;
			top: 0;
			transform: translate(-50%, -50%);
			text-align: center;
			padding-top: 14rpx;
			font-size: 36rpx;
			font-weight: 700;
			color: #fefefe;
		}

		.inner {
			width: 100%;
			height: 534rpx;
			background: url("../../static/img/ad_mask.png") no-repeat center / 100%;
			font-size: 32rpx;
			font-weight: 400;
			color: #fefefe;
			padding: 0 20rpx;

			.inner_detail {
				margin-top: 26rpx;
			}
		}
	}

	.header {
		width: 100%;
		background-color: #0a0b24;

		.home_header {
			background: linear-gradient(141deg, rgba(34, 35, 89, .77), rgba(5, 17, 43, .77));
			background-color: #0a0b24;
			border-radius: 0 0 30rpx 30rpx;

			.top {
				height: 180rpx;
				background: linear-gradient(141deg, rgba(34, 35, 89, .77), rgba(5, 17, 43, .77));
				background-color: #0a0b24;
				position: sticky;
				top: 0;
				padding: 0 24rpx;
				z-index: 999;

				.img {
					width: 74rpx;
					height: 74rpx;
					border-radius: 50%;
					overflow: hidden;
				}

				.search {
					flex: 1;
					margin-left: 34rpx;
					font-size: 30rpx;
					font-weight: 400;
					color: #b6b7e4;
					height: 75rpx;
					background: rgba(52, 53, 87, .54);
					border-radius: 40rpx;
				}

				.news {
					width: 48rpx;
					height: 48rpx;
					margin-left: 34rpx
				}
			}

			.ad {
				width: 100%;
				padding: 0 24rpx;

				.img {
					width: 100%;
				}
			}

			.nav {
				padding: 10rpx 24rpx 30rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.nav_list {
					width: 154rpx;
					height: 150rpx;
					background-color: #12132d;
					border: 0.5px solid #3b3e68;
					box-sizing: border-box;
					border-radius: 36rpx;
					font-weight: 400;
					color: #fff;
					margin: 13rpx 0;
					font-size: 24rpx;
					flex-direction: column;

					.img {
						width: 60rpx;
						height: 60rpx;
						object-fit: contain;
						margin-bottom: 16rpx;
					}
				}
			}

		}

		.all_header {
			background: #0a0b24;

			.top {
				background: #0a0b24;
			}
		}

		.second_header {
			height: 166rpx;
			padding: 0 24rpx;
			position: relative;

			.title {
				font-size: 36rpx;
				color: #fff;
			}

			.icon {
				position: absolute;
				left: 12rpx;
				top: 50%;
				transform: translateY(-50%);
			}

			.news {
				position: absolute;
				right: 48rpx;
				top: 50%;
				transform: translateY(-50%);
			}
		}
	}
</style>